<template>
  <div>
    <van-nav-bar
      title="商品"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image.img_url" />
      </van-swipe-item>
    </van-swipe>

    <div class="tips">
      <ul>
        <li>30天无忧退货</li>
        <li>48小时快速退款</li>
        <li>满68元免邮费</li>
      </ul>
    </div>

    <div class="info_title">
      <h2>{{info.name}}</h2>
      <h3>{{info.goods_brief}}</h3>
      <p>￥{{info.retail_price}}</p>
    </div>
    <van-cell title="请选择规格数量" is-link />

    <div class="parameter">
      <h2>商品参数</h2>
      <ul>
        <li v-for="(item, index) in attribute" :key="index">
          <span class="par_left">{{item.name}}</span>
          <span class="par_right">{{item.value}}</span>
        </li>
      </ul>
    </div>
    <div class="proDetail" v-html="info.goods_desc"></div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon to="/buycart" :info="$store.state.cartTotal.goodsCount === 0 ? '' : $store.state.cartTotal.goodsCount" icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star-o" text="收藏" />
      <van-goods-action-button type="warning" @click="addShop" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 商品规格 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'vant'

Vue.use(Lazyload)
const sku = {
  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  tree: [
    {
      k: '颜色', // skuKeyName：规格类目名称
      k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
      v: [
        {
          id: '1', // skuValueId：规格值 id
          name: '红色' // skuValueName：规格值名称
        },
        {
          id: '1',
          name: '蓝色'
        }
      ],
      largeImageMode: true //  是否展示大图模式
    }
  ],
  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
  list: [
    {
      id: 2259, // skuId
      's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '3', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 100, // 价格（单位分）
      stock_num: 110 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId
      's-1': '1', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '4', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 100, // 价格（单位分）
      stock_num: 130 // 当前 sku 组合对应的库存
    }
  ],
  price: '1.00', // 默认价格（单位元）
  stock_num: 227, // 商品总库存
  collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
  none_sku: false, // 是否无规格商品
  hide_stock: false // 是否隐藏剩余库存
}
export default {
  props: ['id'],
  data () {
    return {
      images: [],
      info: {},
      data: {},
      attribute: [],
      show: false,
      sku: sku,
      goods: {
        title: '测试',
        picture: 'https://img01.yzcdn.cn/1.jpg'
      }
    }
  },
  async created () {
    this.$store.dispatch('AjaxCarList', this)
    const { data: res } = await this.$http.get('goods/detail', { params: { id: this.id } })
    this.data = res.data
    // console.log(res.data)
    this.info = res.data.info
    this.attribute = res.data.attribute
    this.images = res.data.gallery
    this.goods.picture = this.info.primary_pic_url
    this.goods.title = this.info.name
    this.sku.price = this.info.retail_price
    this.sku.stock_num = this.info.goods_number
    const tree = []
    res.data.specificationList.forEach(item => {
      const arr = []
      item.valueList.forEach(item2 => {
        arr.push({
          id: item2.id, // skuValueId：规格值 id
          name: item2.value // skuValueName：规格值名称
        })
      })
      tree.push({
        k: item.name, // skuKeyName：规格类目名称
        k_s: 's-' + item.specification_id,
        v: arr
      })
    })
    this.sku.tree = tree
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    // 讲当前的内容提交到订单页
    onBuyClicked () {},
    // 选择商品规格，并提交到购物车
    async onAddCartClicked (skuData) {
      // console.log(skuData)
      const chooseContent = skuData.selectedSkuComb['s-1'] + '_' + skuData.selectedSkuComb['s-2']
      // console.log(chooseContent)
      const resultPro = this.data.productList.filter(item => {
        if (item.goods_specification_ids === chooseContent) {
          return true
        } else {
          return false
        }
      })
      // console.log(resultPro)
      this.show = false
      const cartRes = await this.$http.post('cart/add', { goodsId: resultPro[0].goods_id, number: skuData.selectedNum, productId: resultPro[0].id })
      console.log(cartRes.data)
      this.$store.commit('setCarList', cartRes.data.data.cartList)
      this.$store.commit('setCartTotal', cartRes.data.data.cartTotal)
    },
    // 加入购物车
    addShop () {
      this.show = true
    }
  }
}
</script>

<style lang="less" scoped>
.van-swipe-item{
  img{
    width: 100%;
  }
}
.tips{
  background: #eee;
  padding: .2rem 0;
  ul{
    display: flex;
    justify-content: space-around;
    li{
      font-size: .12rem;
      position: relative;
    }
    li::before{
      content: '';
      position: absolute;
      left: -11px;
      top: 4px;
      width: 4px;
      height: 4px;
      border: 2px solid red;
    }
  }
}
.info_title{
  text-align: center;
  h2{
    font-size: .4rem;
    font-weight: 500;
    padding-top: 0.3rem;
  }
  h3{
    font-size: .12rem;
    color: #999;
    padding-top: 0.1rem;
  }
  p{
    font-size: .2rem;
    color: red;
    padding-top: 0.5rem;
  }
}
.parameter{
  padding: 0 .32rem;
  h2{
    font-size: .4rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
  }
  ul{
    li{
      display: flex;
      align-items: center;
      margin-bottom: 0.1rem;
      background: #eee;
      .par_left{
        width: 30%;
        padding: 0.2rem;
        border-right: 1px solid #fff;
        color: #959595;
      }
      .par_right{
        width: 70%;
        padding: 0.2rem;
      }
    }
  }
}
</style>
